<template>
    <div>
        <el-row>
            <el-col :span="24">
                <el-card style="width:100%">
                    <div slot="header">历史订单</div>
                    <div>
                        <el-table :data="tableData" style="width: 100%" stripe>
                            <el-table-column prop="time" label="创建日期" width="width" align="center"></el-table-column>
                            <el-table-column
                                prop="roomType"
                                label="房间类型"
                                width="width"
                                align="center"
                            ></el-table-column>
                            <el-table-column prop="total" label="订单金额" width="width" align="center"></el-table-column>
                            <el-table-column
                                prop="orderId"
                                label="订单编号"
                                width="width"
                                align="center"
                            ></el-table-column>
                            <el-table-column label="操作" align="center">
                                <template slot-scope="scope">
                                    <el-button
                                        type="text"
                                        size="mini"
                                        @click="handleCheck(scope.row)"
                                    >查看</el-button>
                                    <el-button
                                        size="mini"
                                        type="text"
                                        style="color:red"
                                        @click="handleDelete(scope.row)"
                                    >删除订单</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <div>
            <el-dialog title="确定删除此订单？" :visible.sync="deleteVisible" width="20%">
                <div align="center">删除后不可恢复</div>
                <div slot="footer">
                    <el-button @click="deleteVisible = false">取 消</el-button>
                    <el-button type="primary" @click="deleteCommit()">确 定</el-button>
                </div>
            </el-dialog>
        </div>
        <div>
            <el-dialog title="订单详情" :visible.sync="checkVisible" width="70%">
                <el-card>
                    <div slot="header">订单编号：{{tableData.orderd}}</div>
                    <img :src="roompic[1]" class="image" />
                    <el-col :span="10" align="left">
                        <div style="margin:15px">
                            <span style="margin-right:20px">姓名:</span>
                            {{curRow.name}}
                        </div>
                        <div style="margin:15px">
                            <span style="margin-right:20px">房间类型:</span>
                            {{curRow.type}}
                        </div>
                        <div style="margin:15px">
                            <span style="margin-right:20px">房间数目:</span>
                            {{curRow.num}}
                        </div>
                        <div style="margin:15px">
                            <span style="margin-right:20px">入住人数:</span>
                            {{curRow.usenum}}
                        </div>
                          <div style="margin:15px">
                            <span style="margin-right:20px">入住时间:</span>
                            {{curRow.checkInTime}}
                        </div>
                          <div style="margin:15px">
                            <span style="margin-right:20px">离开时间:</span>
                            {{curRow.checkOutTime}}
                        </div>
                        <div style="margin:15px">
                            <span style="margin-right:20px">订单总金额:</span>
                            {{curRow.total}}元
                        </div>
                        <div style="margin:15px">
                            <span style="margin-right:20px">订单日期:</span>
                            {{curRow.time}}
                        </div>
                        <div style="margin:15px">
                            <span style="margin-right:20px">订单编号:</span>
                            {{curRow.orderId}}
                        </div>
                    </el-col>
                </el-card>
                <div slot="footer">
                    <el-button type="primary" @click="checkVisible = false">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { getOrderInfo, deleteCurRow } from '../../../api/index.js';
export default {
    name: 'account',
    data() {
        return {
            curRow: { name: '', type: '', total: '', num: '', time: '', orderId: '',useNum:'' },
            tableData: [],
            roompic: [
                require('../image/timg1.jpg'),
                require('../image/timg1.jpg'),
                require('../image/timg3.jpg'),
                require('../image/timg4.jpg'),
                require('../image/timg4.jpg'),
                require('../image/timg4.jpg')
            ],
            deleteVisible: false,
            checkVisible: false,
            currentRow: ''
        };
    },
    created() {
        this.getInfo();
    },
    mounted() {
        this.getInfo();
    },
    methods: {
        async getInfo() {
            let json = {
                id: this.$store.state.user.id
            };
            const res = await getOrderInfo(json).catch(() => {
                return 'error';
            });
            console.log(res);
            this.tableData = res;
        },
        handleDelete(row) {
            console.log(row);
            this.currentRow = row;
            this.deleteVisible = true;
        },
        async deleteCommit() {
            let json = {
                mkey: this.currentRow.mkey
            };
            console.log(json);
            await deleteCurRow(json).catch(() => {
                return 'error';
            });
            this.deleteVisible = false;
            this.getInfo();
        },
        handleCheck(row) {
            this.curRow.name = row.userName;
            this.curRow.type = row.roomType;
            this.curRow.total = row.total;
            this.curRow.num = ''; //这里需要改表
            this.curRow.orderId = row.orderId;
            this.curRow.time = row.time;
            this.curRow.checkInTime=row.checkInTime;
            this.curRow.checkOutTime=row.checkOutTime;
            this.curRow.num=row.roomNum;
            this.curRow.usenum=row.customerNum;
            this.checkVisible = true;
        }
    }
};
</script>

<style scoped>
.image {
    margin: 20px;
    width: 35%;
}
</style>